<template>
  <view class="cu-modal" :class="showDialog ? 'show': ''" :style="'margin-top:'+top+';'" @tap="hide">
    <view class="cu-dialog padding bg-white position-absolute" style="width:100%;left:0;top:0" @tap.stop="">
      <!--          场次信息-->
      <view class="flex flex-wrap">
        <view v-for="(item,index) in schedules" :key="index" class="flex flex-direction radius-df padding-tb-xs padding-lr-sm bg-gray margin-right-sm margin-bottom-sm" style="width: 30%;" :class="item.sid===sid ? 'curr':''" @tap="confirm(index)">
          <view class="flex justify-between">
            <view class="text-black text-bold margin-top-xxs">{{ item.show_time }}</view>
            <view class="text-gray text-sm margin-top-xxs margin-left-sm" style="white-space:nowrap">{{ item.show_version }}</view>
          </view>
          <view class="text-gray text-sm flex justify-start" style="text-decoration:line-through">￥34</view>
          <view class="text-red text-sm flex justify-start">￥{{ item.price }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false,
      top: (this.CustomBar + 68) + 'px',
    }
  },
  props: {
    schedules: {
      type: Array,
      default: []
    },
    sid: {
      type: Number,
      default: 0
    }
  },
  components: {},
  computed: {},
  created() {

  },
  methods: {
    show() {
      this.showDialog = true
    },
    hide() {
      this.showDialog = false
    },
    confirm(index) {
      this.$emit('confirm', this.schedules[index])
      this.hide();
    }
  }
}
</script>
<style scoped>
.curr {
  border: solid 1px #f00;
  background: #FCF0F0;
}
</style>